// 运营业绩统计
<template>
    <div class="gradient-content full-width full-height">
        <div :id="idName"></div>
    </div>
</template>

<script>
import { Chart } from '@antv/g2'
export default {
    props: {
        idName: {
            type: String,
            default: 'order_30',
        },
        chartData: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            chart: null,
            height: 0,
        }
    },
    watch: {
        chartData(val) {
            this.chart.changeData(val)
        },
    },
    mounted() {
        this.$nextTick(() => {
            const boxContElement = document.querySelector(`.gradient-content`)
            this.height = boxContElement.clientHeight

            this.render()
        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.destroy()
    },
    methods: {
        render() {
            // Step 1: 创建 Chart 对象
            this.chart = new Chart({
                container: this.idName,
                height: this.height,
                autoFit: true,
                padding: [30, 40, 30, 50],
            })
            // Step 2: 载入数据源
            this.chart.data(this.chartData)
            this.chart.scale({
                date: {
                    alias: '日期',
                    type: 'shopname',
                },
                Today: {
                    alias: '今日',
                    // min: 0,
                    // sync: true, // 将 pv 字段数值同 time 字段数值进行同步
                    nice: true,
                },
                Yesterday: {
                    alias: '昨日',
                    // min: 0,
                    // sync: true, // 将 pv 字段数值同 time 字段数值进行同步
                    nice: true,
                },
            })
            this.chart.axis('shopname', {
                line: {
                    style: {
                        stroke: 'rgba(255,255,255, 0.3)',
                        lineWidth: 0.5,
                        // 设置箭头
                        lineCap: 'square', // 箭头形状
                    },
                    
                },
            })
            this.chart.axis('Today', {
                grid: {
                    line: {
                        style: {
                            stroke: 'rgba(255,255,255, 0.3)',
                            lineWidth: 0.5,
                        }
                    }
                },
                line: {
                    style: {
                        stroke: 'rgba(255,255,255, 0.3)',
                        lineWidth: 0.5,
                        // 设置箭头
                        lineCap: 'square', // 箭头形状
                    },
                    
                },
            })
            this.chart.axis('Yesterday', {
                grid: {
                    line: {
                        style: {
                            stroke: 'rgba(255,255,255, 0.3)',
                            lineWidth: 0.5,
                        }
                    }
                },
                line: {
                    style: {
                        stroke: 'rgba(255,255,255, 0.3)',
                        lineWidth: 0.5,
                        // 设置箭头
                        lineCap: 'square', // 箭头形状
                    },
                    
                },
            })
            // this.chart.axis('Today')
            // this.chart.axis('Yesterday')
            this.chart.tooltip({
                showCrosshairs: true,
                shared: true,
            })
            this.chart
                .line()
                .position('shopname*Today')
                .color('#5A90FA')
            this.chart
                .line()
                .position('shopname*Yesterday')
                .color('#10A482')
                .shape('smooth')
            // Step 4: 渲染图表
            this.chart.render()
        },
    },
}
</script>
